<template>
  <el-card>
    <div class="card-wrap">
      <el-page-header @back="goBack" content="历史统计数据"> </el-page-header>
    </div>
  </el-card>
  <br />

  <el-card>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
    >
      <el-row type="flex" justify="start" :gutter="20">
        <el-col :span="6">
          <el-form-item label="" prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              type="month"
              placeholder="选择年度/月份查看数据"
              style="width: 100%"
              @change="changeDate"
              value-format="YYYY-MM"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleDownload">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <br />

    <el-table
      :data="tableData"
      border
      :span-method="arraySpanMethod"
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column prop="subject" label="类别"> </el-table-column>
      <el-table-column
        prop="currentMonth"
        :label="ruleForm.month"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="currentYear"
        :label="ruleForm.year + '年当年发生'"
        align="center"
      >
      </el-table-column>
    </el-table>
    <br />

    <br />
    <div class="table-header">预算执行率统计</div>
    <el-table
      :data="tableList"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column
        prop="happenDept"
        label="经费类别"
        width="150"
        align="center"
      />
      <el-table-column :label="ruleForm.year + '年度预算'" align="center">
        <el-table-column
          prop="yearTotal"
          label="总额"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="yearDailySpend"
          label="日常性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="yearCapitalSpend"
          label="资产性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="yearOtherSpend"
          label="其他支出"
          min-width="140"
          align="center"
        />
      </el-table-column>
      <el-table-column :label="ruleForm.month" align="center">
        <el-table-column
          prop="monthTotal"
          label="总额"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthDailySpend"
          label="日常性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthCapitalSpend"
          label="资产性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthOtherSpend"
          label="其他支出"
          min-width="140"
          align="center"
        />
      </el-table-column>
      <el-table-column :label="ruleForm.month" align="center">
        <el-table-column
          prop="monthTotalCal"
          label="总额"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthTotalCalRateStr"
          label="总额-预算执行率"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthDailySpendCal"
          label="日常性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthDailySpendCalRateStr"
          label="日常性支出-预算执行率"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthCapitalSpendCal"
          label="资产性支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthCapitalSpendCalRateStr"
          label="资产性支出-预算执行率"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthOtherSpendCal"
          label="其他支出"
          min-width="140"
          align="center"
        />
        <el-table-column
          prop="monthOtherSpendCalRateStr"
          label="其他支出-预算执行率"
          min-width="140"
          align="center"
        />
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { reactive, toRefs, onMounted } from "vue";
import { getHistoryForFunds, getHistoryForFunds2 } from "/@/api/funds";
import { postDownload } from "/@/utils/download";

const router = useRouter();

const state = reactive({
  ruleForm: {
    date: "",
    month: "",
    year: ""
  },
  tableData: [],
  tableList: []
});

const rules = reactive({
  date: [
    {
      required: true,
      message: "请选择日期月份",
      trigger: "blur"
    }
  ]
});

const { ruleForm, tableData, tableList } = toRefs(state);

const changeDate = date => {
  state.ruleForm.date = date;
  const arr = state.ruleForm.date.split("-");
  state.ruleForm.month = arr[1] + "月当月发生";
  state.ruleForm.year = arr[0];
  getData();
  getData2();
};

const getData = async () => {
  const { code, data } = await getHistoryForFunds(state.ruleForm.date);
  if (code === 200) {
    state.tableData = data;
  }
};
const getData2 = async () => {
  const { code, data } = await getHistoryForFunds2(state.ruleForm.date);
  if (code === 200) {
    state.tableList = data;
  }
};

const arraySpanMethod = ({ row }) => {
  if (row.subject.indexOf("（") !== -1) {
    return [1, 3];
  }
};

const handleDownload = async () => {
  await postDownload(
    `/rdms-admin/fee/history/month/statistics/export/${state.ruleForm.date}`,
    `月度预算统计${new Date().getTime()}.xlsx`
  );

  await postDownload(
    `/rdms-admin/fee/history/month/carryout/statistics/export/${state.ruleForm.date}`,
    `预算执行率${new Date().getTime()}.xlsx`
  );
};

onMounted(() => {
  const currentDate = new Date();
  const arr = currentDate.toISOString().split("-");
  state.ruleForm.date = arr[0] + "-" + arr[1];
  state.ruleForm.month = arr[1] + "月当月发生";
  state.ruleForm.year = arr[0];
  getData();
  getData2();
});

const goBack = () => {
  router.push({
    path: "/funds/statistics"
  });
};
</script>

<style lang="scss" scoped>
.card-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-btn {
    font-size: 14px;
    cursor: pointer;
  }
}

.custom-select-width {
  width: 100% !important;
}

.table-header {
  line-height: 40px;
  background-color: rgba(216, 220, 230, 0.298);
  text-indent: 30px;
  margin-bottom: 10px;
}

:deep .el-table .cell {
  word-break: unset;
}
</style>
